<template>
  <section class="footer-box">
    <div class="foot-top">
      <div class="left-side">
        <ul class="list">
          <li class="list-item" v-for="i in list" :key="i.id">
            <p class="title">{{i.name}}</p>
            <ul>
              <li v-for="y in i.child" :key="y.id">{{y.name}}</li>
            </ul>
          </li>
        </ul>
        <p class="tips">本站声明：任何信息都不能代替职业医师面对面的诊断和治疗，本网站所载的各种信息和数据仅供参考。</p>
      </div>
      <div class="right-side">
        <div class="logo-code">
          <div class="logo">
            <img src="./img/footerlogo.png" alt="logo">
            <p>400-800-8888</p>
            <p>北京市朝阳区望京东辛店新街211号</p>
          </div>
          <div class="code">
            <img src="./img/code1.png" alt="code1">
            <img src="./img/code2.png" alt="code2">
          </div>
        </div>
        <div class="wj">
          <img src="./img/weixin.png" alt="wj.png">
          <img src="./img/weibo.png" alt="wj.png">
          <img src="./img/wj.png" alt="wj.png">
          <img src="./img/wj1.png" alt="wj1.png">
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <section class="container">
        <p>粉红宝宝微整形美容有限公司版权所有</p>
        <p>京ICP备13051000号</p>
      </section>
    </div>
  </section>
</template>

<script>
export default {
  name: 'PageFooter',
    data () {
      return {
          list: [
              {id: 1, name: '关于我们', child: [{id: 11, name: '公司介绍'}, {id: 12, name: '联系方式'}, {id: 13, name: '合作伙伴'}]},
              {id: 2, name: '加入我们', child: [{id: 21, name: '加入我们'}, {id: 22, name: '加入我们'}, {id: 23, name: '加入我们'}]},
              {id: 3, name: '联系我们', child: [{id: 31, name: '联系我们'}, {id: 32, name: '联系我们'}, {id: 33, name: '联系我们'}]},
              {id: 4, name: '常见问题', child: [{id: 41, name: '常见问题'}, {id: 42, name: '常见问题'}, {id: 43, name: '常见问题'}]}
          ]
      }
    }
}
</script>


<style scoped lang="less">
  @import "../../style/style.less";
  .footer-box {
    color: #fff;
    .foot-top {
      width: @container-width;
      margin: 0 auto;
      display: flex;
      text-align: left;
      padding: 60px 10px;
      .left-side, .right-side{
        width: 50%;
      }
      .left-side {
        padding-right: 10px;
        .list {
          list-style: none;
          display: flex;
          .list-item {
            width: 25%;
            .title {
              font-size: 16px;
              line-height: 3;
            }
            ul {
              list-style: none;
              color: #9b9b9b;
              font-size: 14px;
              li{
                line-height: 2;
              }
            }
          }
        }
        .tips {
          color: #9b9b9b;
          padding: 20px 0;
        }
      }
      .right-side {
        .logo-code {
          display: flex;
          .logo {
            flex: 0;
            padding-right: 10px;
          }
          p{
            text-align: right;
          }
          .code {
            flex: 1;
            text-align: right;
            img {
              padding: 0 10px;
              display: inline-block;
            }
          }
        }
        .wj {
          padding: 10px 0;
          text-align: right;
          vertical-align: middle;
          img {
            padding: 0 10px;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
    .footer-bottom{
      background-color: @footer-bg-dark;
      padding: 10px 0;
      font-size: 12px;
      .container{
        width: @container-width;
        margin: 0 auto;
        text-align: center;
      }
    }
  }
</style>
